<template>
  <div class="install">
    <div class="zzc" v-show="zzcval" @click="no"></div>
    <div class="buttom" v-show="buttomval">
      <div class="buttom-box">
        <div class="box1" @click="toaddinput('仅自己可见')">仅自己可见</div>
        <div class="box" @click="toaddinput('所有人可见')">所有人可见</div>
      </div>
      <div class="box1" @click="no">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 控制遮罩层的显示隐藏
    zzcval: {
      type: Boolean,
      default: false
    },
    // 底部的显示隐藏
    buttomval: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    no() {
      this.$emit('no')
    },
    toaddinput(val) {
      this.$emit('toaddinput', val)
    }
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;
$height: 100%;

.install {
  position: relative;

  .zzc {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 100;
    width: $width;
    height: $height;
  }

  .buttom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 96%;
    margin-left: 2%;
    height: 130px;
    z-index: 101;

    .buttom-box {
      margin-bottom: 10px;

      .box {
        height: 40px;
        background-color: #fff;
        text-align: center;
        font-size: 18px;
        line-height: 40px;
        border-radius: 0px 0px 5px 5px;
      }
    }

    .box1 {
      height: 40px;
      background-color: #fff;
      text-align: center;
      font-size: 18px;
      line-height: 40px;
      border-radius: 5px 5px 0px 0px;
    }
  }
}
</style>